<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EaselJS Example: Extracting a frame from a sprite sheet</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
	var imgSeq;		// bmp of the sprite sheet

	function init() {
		//wait for the image to load
		imgSeq = new Image();
		imgSeq.onload = handleImageLoad;
		imgSeq.src = "assets/testSeq.png";
	}

	function handleImageLoad() {
		// create sprite sheet data from the loaded image, and define the animation sequences in it.
		// for example, {walkUpRight:[0,19]} defines an animation sequence called "walkUpRight" that
		// will play back frames 0 to 19 inclusive.
		var data = {
			images: [imgSeq],
			frames: {width:64,height:68},
			animations: {walkUpRight:[0,19], walkDownRight:[20,40], walkRight:[41,59]}
		};

		// create a spritesheet from the data:
		var spriteSheet = new createjs.SpriteSheet(data);

		// extract the first frame of the walkRight sequence as a new image:
		// could alternately use the frame number.
		img = createjs.SpriteSheetUtils.extractFrame(spriteSheet, "walkRight");

		// note that you could use this as the source of a Bitmap object as well, though
		// in almost all cases you'd be better just using Sprite.
	    //var bmp = new createjs.Bitmap(img);

		// add the newly created image to the bottom of this document:
		document.getElementById("content").appendChild(img);
	}

	</script>
</head>

<body onload="init();">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Extract Frame Example</h1>
	    <p>Demonstrates using the <strong>SpriteSheetUtils.extractFrame()</strong> method to extract a single frame from a loaded sprite sheet as an image.</p>
	</header>

	<!-- allow for alert of frame data-->
	<div id="content">
		Original sprite sheet:<br/>
		<img src="assets/testSeq.png"><br/><br/><br/>
		Extracted frame:<br/>
	</div>
</body>
</html>
